<template>
<div class="img-list">
  <myheader titleName='图文资讯'></myheader>
  <div class="cate">
    <ul id="cateul">
      <li @click='changeCate(0)'><span>全部</span></li>
      <li v-for='item in cateList' :key='item.id' @click='changeCate(item.id)'><span>{{item.title}}</span></li>
    </ul>
  </div>
  <div class="img-list-box">
    <ul>
        <!-- 2.3 循环图片列表数据 -->
      <li v-for='item in imgList' :key='item.id'>
        <!-- 2.7 通过router-link 实现跳转到图片详情页 -->
        <router-link :to="`/img_detail/${item.id}`">
          <!-- 2.6 v-lazy指令实现图片懒加载 -->
          <img v-lazy="item.img_url" alt="item.title">
        </router-link>
        <p>
          <span class="title">{{item.title}}</span>
          {{item.zhaiyao}}
        </p>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
import myheader from '@/components/myheader'
import {getImgCate, getImgList} from '@/api'
export default {
  components: {
    myheader
  },
  data () {
    return {
      cateList: [], // 所有分类列表
      imgList: [] // 图片数据列表
    }
  },
  created () {
    // 1.2 调用初始化顶部图片分类
    this.initImgCate()
    // 2.2 调用全部分类，也就是id为0时的所有列表数据
    this.initImgList(0)
  },
  methods: {
    // 1.1 初始化顶部图片分类
    initImgCate () {
      getImgCate()
        .then(res => {
          // console.log(res)
          this.cateList = res.message
          // 分类总数量，因为全部这一项没有包含在res.message数据中，所以需要加1
          let totalNum = this.cateList.length + 1
          // 分类总宽度，根据设计稿，每个宽度为60px
          let w = totalNum * 60 + 'px'
          // 最后将总长度赋值给ul
          document.getElementById('cateul').style.width = w
        })
    },
    // 2.1 初始化图片列表数据
    initImgList (id) {
      getImgList(id)
        .then(res => {
          // console.log(res)
          this.imgList = res.message
        })
    },
    // 2.4 切换分类
    changeCate (id) {
      this.initImgList(id)
    }
  }
}
</script>
<style lang="scss" scoped>
  .img-list {
    margin-bottom: 55px;
    margin-top: 40px;
  }
  .cate {
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 14px;
    ul {
      padding-left: 10px;
      margin: 5px 0;
      li {
        list-style: none;
        display: inline-block;
        padding: 0 0 0 5px;
        span {
          color: #0094ff;
        }
      }
    }
  }
  .img-list-box {
    ul {
      padding: 0;
      li {
        list-style: none;
        position: relative;
      }
    }
    p {
      font-size: 14px;
      color: #fff;
      position: absolute;
      bottom: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.4);
      .title {
        font-weight: bold;
      }
    }
    img {
      width: 100%;
    }
  }

  image[lazy="loading"] {
    width: 100%;
    margin: auto;
  }
</style>
